<template>
  <div id="personalDescriptionModify">
    <!-- input -->
    <section class="descriptionContainer">
      <div class="textBox">
        <el-input
          ref="descIpt"
          type="textarea"
          v-model="description"
          placeholder="请输入描述内容"
          resize="none"
          @input="textInputing"
        ></el-input>
        <span class="limit"
          ><span
            :class="
              description && description.length > 100 ? 'limitOut' : 'limitIn'
            "
            >{{ description ? description.length : 0 }}</span
          >/100</span
        >
      </div>
      <p class="nickNameTip">描述内容最多不可超过100个字符</p>
    </section>

    <!-- button -->
    <section class="saveBtnContainer">
      <el-button
        v-if="isCodeBtnDisabled"
        :disabled="isCodeBtnDisabled"
        class="saveBtn btn_grey"
        @click="saveBtn"
        >保存</el-button
      >
      <el-button
        v-else
        class="saveBtn btn_color"
        @click="saveBtn"
        :disabled="isCodeBtnDisabled"
        >保存</el-button
      >
    </section>
  </div>
</template>

<script>
import { updateProfileApi } from "@/api";
import { iscode, reHeight } from "@/utils";
import { mapState, mapActions } from "vuex";

export default {
  name: "PersonalDescriptionModify",
  data() {
    return {
      // remark
      description: "",
      // btn disabled
      isCodeBtnDisabled: true,
    };
  },
  computed: {
    // 获取用户信息
    ...mapState(["userInfo"]),
  },
  mounted() {
    // 一进来就给data数据
    this.description = this.userInfo.remark;

    // 解决软键盘的问题
    reHeight("personalDescriptionModify", this);
  },
  // 解决键盘没收起就返回到修改资料界面布局白色
  beforeRouteLeave(to, from, next) {
    this.$nextTick(() => {
      this.$refs.descIpt.blur();
    });
    setTimeout(() => {
      next();
    }, 100);
  },
  methods: {
    // ------ vuex ------
    // 获取用户信息（用于认证之后更新vuex里的userInfo数据）
    ...mapActions(["getUserInfo"]),

    // ------ 异步相关的方法 ------
    // 保存修改
    async updateProfile() {
      let result = await updateProfileApi({
        remark: this.description.trim(),
      });
      if (iscode(result)) {
        // 更新vuex里的用户数据
        this.getUserInfo();
        this.$toast({
          className: "authentication_ok",
          message: "保存成功",
          duration: 2000,
          icon: "passed",
        });
        this.$router.push("/personalModify");
      }
    },

    // -----功能性方法-----
    // 点击按钮保存信息需改
    saveBtn() {
      this.updateProfile();
    },
    // 正在输入
    textInputing() {
      // if (this.description.length <= 100 && this.description.length > 0) {
      //   this.isCodeBtnDisabled = false;
      // } else {
      //   this.isCodeBtnDisabled = true;
      // }
      this.isCodeBtnDisabled = false;
    },
  },
};
</script>

<style lang="less" scoped>
#personalDescriptionModify {
  // -nickName
  .descriptionContainer {
    width: 95%;
    margin: 0 auto;
    padding-top: 30px;

    /deep/.el-textarea {
      width: 100%;
      height: 278px;
      background: #1e2020;
      box-shadow: 0px 2px 0px 0px #333333;
      padding-bottom: 72px;
    }

    // input
    /deep/.el-textarea__inner {
      width: 100%;
      height: 100%;
      background: none;
      border: none;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 44px;
      padding-left: 0;
      padding-bottom: 72px;
    }
    /deep/.el-textarea__inner::placeholder {
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #444444;
      line-height: 44px;
    }

    // limit
    .textBox {
      position: relative;
      .limit {
        position: absolute;
        right: 30px;
        bottom: 20px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 24px;

        .limitOut {
          color: #f24038;
        }
        .limitIn {
          color: #00ffb0;
        }
      }
    }

    // tip
    .nickNameTip {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      margin-top: 40px;
    }
  }

  // -saveBtn
  .saveBtnContainer {
    width: 100%;
    padding: 0 30px;
    margin-top: 100px;

    // btn
    .saveBtn {
      width: 100%;
      height: 72px;
      font-size: 32px;
      font-family: Microsoft YaHei;
      border-radius: 0;
      color: #2b2c2d;
      font-weight: 500;
      border: none;
      background: none;
      background-position: center center;
      background-size: 100% 100%;
    }
    .btn_color {
      background-image: url("../../../assets/images/mobile_black/home/btn_color.png");
    }
    .btn_grey {
      background-image: url("../../../assets/images/mobile_black/home/btn_grey.png");
    }
  }
}
</style>
